<template>
	<view class="page">
		<view class="page-tips">
			<view class="tips-title">
				合理安排行程，提升工作效率
			</view>
			<view class="tips-desc">
				可缩放地图不同区域大小，查看不同客户
			</view>
		</view>
		<view class="map">
			<image class="list-icon" src="../../../static/img/list.png" mode="widthFix" @click="back"></image>
			<map style="width: 100%; height: 100%;" :markers="covers" :longitude="center.longitude"
				:latitude="center.latitude" @markertap="markertap" id="mapId">
			</map>
			<view class="card-wrap">
				<image class="map-int" src="../../../static/img/mapInt.png" mode="widthFix" @click="toMapCenter">
				</image>
				<view class="card-title flexACB">
					<view class="card-label">
						点击地图编号可查看联系方式
					</view>
					<view class="card-desc">
						快速查看自己周围
					</view>
				</view>
				<view class="user-card" v-if="selectUser.id">
					<view class="top">
						<view class="tips">
							<view class="tip flexAJC" style="background: #FFE6AE;color: #E1A826;"
								v-if="selectUser.sign">
								{{selectUser.sign}}
							</view>
							<view class="tip flexAJC" style="background: #FFC3C3;color: #D73030;">
								{{typeList[selectUser.type].label}}
							</view>
							<view class="tip flexAJC" style="background: #B2CEFF;color: #326ED5;"
								v-if="selectUser.sfrz==1">
								已认证
							</view>
						</view>
						<view class="user">
							<view class="name-wrap">
								<view class="name">
									{{selectUser.memberName}}
								</view>
								<view class="label">
									{{selectUser.position}}
								</view>
								<image class="vip" src="../../../static/img/vip-icon.png" mode="widthFix"></image>
							</view>
							<view class="ads">
								<image class="icon" src="../../../static/img/gongsi.png" mode="widthFix"></image>
								{{selectUser.companyName}}
							</view>
							<view class="ads">
								<image class="icon" src="../../../static/img/dizhi.png" mode="widthFix"></image>
								{{selectUser.address}}
							</view>
						</view>
						<view class="avatar">
							<u-avatar size="80rpx"
								:src="selectUser.headImg?fileServer+selectUser.headImg:null"></u-avatar>
							<view class="text">
								已有<text style="font-weight: bold;">{{selectUser.lxNum}}</text>人联系
							</view>
						</view>
					</view>
					<view class="content">
						主营品牌产品：{{selectUser.zypphcp}}
					</view>
					<view class="content">
						销售渠道：{{selectUser.xsqudao}}
					</view>
					<view class="btn-list">
						<view class="btn flexAJC" style="background-color: #43B83E;">
							<image class="icon" mode="widthFix" src="../../../static/img/whatsappIcon.png"></image>
							语音
						</view>
						<view class="btn flexAJC" style="background-color: #FA9932;">
							<image class="icon" mode="widthFix" src="../../../static/img/shipin-white.png"></image>
							视频
						</view>
						<view class="btn flexAJC" style="background-color: #4FBFE7;">
							<image class="icon" mode="widthFix" src="../../../static/img/dizhi-white.png"></image>
							导航
						</view>
						<view class="btn flexAJC" style="background-color: #598FEE;">
							<image class="icon" mode="widthFix" src="../../../static/img/Telephone-white.png"></image>
							电话
						</view>
						<view class="btn flexAJC" style="background-color: #16C40B">
							<image class="icon" mode="widthFix" src="../../../static/img/liaoyilia-green.png"></image>
							聊聊
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				covers: [],
				type: '',
				selectUser: {},
				center: {
					latitude: 0,
					longitude: 0,
				},
				lists: [],
				typeList: [],
				fileServer: this.$fileServer,
			};
		},
		onLoad(o) {
			this.typeList = getApp().globalData.typeList
			this.type = o.type
			uni.getLocation({
				success: (res) => {
					this.center.latitude = res.latitude
					this.center.longitude = res.longitude
				}
			})
			if (this.type === 'khbwl') {
				this.$api.custom.getCustombwlList({
					pageIndex: this.pageIndex,
					pageSize: 99999,
				}).then(res => {
					this.lists = res.rows
					this.setCovers()
				})
			}else if(this.type === 'ssdj'){//实时对接
				
			}else if(this.type === 'zkh'){//找客户
			
			}
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			markertap(e) {
				for (let i = 0; i < this.lists.length; i++) {
					if (this.lists[i].id.indexOf(e.markerId) !== -1) {
						this.selectUser = this.lists[i]
					}
				}
				for (let i = 0; i < this.covers.length; i++) {
					if (this.covers[i].id === e.markerId) {
						this.covers[i].iconPath = '../../../static/img/marker-blue.png'
						this.covers[i].label.bgColor = '#2482EC'
					}
				}
			},
			setCovers() {
				this.covers = this.lists.map(item => {
					const lastNineDigits = item.id.slice(-9); // 截取后九位
					const lastNineAsNumber = Number(lastNineDigits); // 转换为数字
					return {
						id: lastNineAsNumber,
						latitude: Number(item.lat),
						longitude: Number(item.lng),
						iconPath: '../../../static/img/marker-red.png',
						label: {
							content: item.sign,
							color: '#ffffff',
							fontSize: 12,
							borderRadius: 4,
							bgColor: '#EC2424',
							padding: 2,
							textAlign: 'center',
							anchorX: 0,
							anchorY: -72,
						}
					}
				})
			},
			toMapCenter() {
				let mapObjs = uni.createMapContext('mapId', this)
				mapObjs.moveToLocation({
					latitude:this.center.latitude,
					longitude:this.center.longitude,
					complete: res => {
						console.log('移动完成:', res)
					}
				})
				// this.onRegionChange('',true)

			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100vh;

		.map {
			width: 100%;
			height: calc(100% - 110rpx);
			position: relative;

			.list-icon {
				position: absolute;
				top: 20rpx;
				right: 32rpx;
				width: 56rpx;
				height: 56rpx;
				z-index: 2;
			}

			.card-wrap {
				width: 710rpx;
				position: absolute;
				bottom: 16rpx;
				left: 20rpx;
				background: linear-gradient(106deg, #FF7A7A 0%, #EC2424 100%);
				border-radius: 52rpx;
				z-index: 2;

				.map-int {
					position: absolute;
					top: -78rpx;
					right: 12rpx;
					width: 56rpx;
					height: 56rpx;
				}

				.card-title {
					height: 110rpx;
					width: 100%;
					padding: 0 54rpx 0 30rpx;

					.card-label {
						font-size: 28rpx;
						color: #FFFFFF;
					}

					.card-desc {
						font-weight: bold;
						color: #FFFFFF;
					}

				}

				.user-card {
					width: 100%;
					background: #FFFFFF;
					padding: 24rpx;
					position: relative;
					bottom: -1px;
					border-radius: 40rpx 40rpx 52rpx 52rpx;

					.check {
						width: 44rpx;
						height: 44rpx;
						position: absolute;
						z-index: 3;
						top: 4rpx;
						left: 0;
					}

					.top {
						width: 100%;
						display: flex;
						padding-bottom: 16rpx;
						margin-bottom: 18rpx;
						border-bottom: 1px solid #F0F0F0;

						.tips {
							width: 118rpx;
							border-radius: 6rpx;
							overflow: hidden;
							flex-shrink: 0;
							position: relative;

							.tip {
								width: 100%;
								height: 40rpx;
							}
						}

						.user {
							flex: 1;
							padding: 0 0 0 12rpx;

							.name-wrap {
								line-height: 44rpx;

								.name {

									font-size: 32rpx;
									font-weight: bold;
									margin-right: 10rpx;
									display: inline-block;
								}

								.label {
									font-size: 24rpx;
									color: #AAAAAA;
									display: inline-block;
									margin-right: 6rpx;
								}

								.vip {
									display: inline-block;
									width: 34rpx;
									height: auto;
								}

								.dept {
									width: auto;
									display: inline-block;
									height: 36rpx;
									border-radius: 18rpx;
									border: 1px solid #DE3333;
									color: #DE3333;
									font-size: 24rpx;
									padding: 0 20rpx;
									line-height: 34rpx;
								}
							}

							.ads {
								color: #777777;
								font-size: 28rpx;
								line-height: 40rpx;

								.icon {
									display: inline-block;
									width: 24rpx;
									height: auto;
									margin-right: 6rpx;
								}
							}
						}

						.avatar {
							flex-shrink: 0;
							display: flex;
							flex-direction: column;
							align-items: flex-end;

							.tx {
								width: 48rpx;
								height: 48rpx;
								border-radius: 50%;
							}

							.text {
								margin-top: 40rpx;
								font-size: 24rpx;
							}
						}

						.avatar-left {
							width: 88rpx;
							height: 88rpx;
							position: relative;

							.tx {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}

							.vip {
								position: absolute;
								right: 0;
								top: 0;
								width: 28rpx;
								height: auto;
							}
						}

						.talk-btn {
							width: 120rpx;
							height: 50rpx;
							background: #16C40B;
							border-radius: 25rpx;
							color: #FFFFFF;
							font-size: 24rpx;
							align-self: center;

							.icon {
								width: 24rpx;
								height: auto;
								margin-right: 4rpx;
							}
						}

					}

					.content {
						color: #AAAAAA;
						line-height: 40rpx;
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}

					.btn-list {
						margin-top: 10rpx;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.btn {
							width: 120rpx;
							height: 50rpx;
							font-size: 24rpx;
							color: #FFFFFF;
							border-radius: 25rpx;

							.icon {
								width: 24rpx;
								height: auto;
								margin-right: 4rpx;
							}
						}
					}

					.content-text {
						padding: 20rpx 0 0 0;
						font-size: 28rpx;
						border-top: 1px solid #F0F0F0;
					}
				}
			}
		}

		.page-tips {
			height: 110rpx;
			background: #EFF4FC;
			padding-top: 12rpx;

			.tips-title {
				text-align: center;
				font-size: 32rpx;
				line-height: 44rpx;
				color: #4280E2;

			}

			.tips-desc {
				color: #4280E2;
				line-height: 34rpx;
				text-align: center;
			}
		}
	}
</style>